<template>
	<view class="index">
		<view class="navBarBox">
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<view class="navBar">
				<view style="width: 70rpx; height: 70rpx; background-color: #fff;border-radius: 50%;"><image class="logo" style="width: 70rpx; height: 70rpx;" src="/static/logo.png" mode="scaleToFill"></image></view>
				<view style="color: #fff;margin-left: 15rpx;font-size: 30rpx;">{{$t('index.LcvcWelcome')}}</view>
			</view>
			<view style="display: flex;margin-left: 90rpx;z-index: 3;background:repeating-linear-gradient(to right,#FFA500,#FFD700);width: 200rpx;border-radius: 20rpx;color: #fff;height: 35rpx;">
				<view style="margin: 0 auto;display: flex;font-size: 14rpx;">
					<view @click="handove('zh')">中文\</view>
					<view @click="handove('en')">English</view>
				</view>
			</view>
		</view>
		<header>
			<view class="notice" />
			<view class="contianer">
				<!-- 轮播图部分 -->
				<swiper class="swiper-home" indicator-dots="true" autoplay="true" interval="2000" circular="true"
					indicator-color="#000" indicator-active-color="#FF0000">
					<swiper-item class="swiperItem">
						<image src="../../static/img/banner.jpg" mode=""></image>
					</swiper-item>
					<swiper-item>
						<image src="../../static/img/1.png" mode=""></image>
					</swiper-item>
					<swiper-item>
						<image style="border-radius: 20rpx;" src="../../static/img/Python.webp" mode=""></image>
					</swiper-item>
				</swiper>
				<main id="RecommendedCourses">
					<view class="courses">
						<span>
							<h1>{{$t('index.RecommendedCourses')}}</h1>
						</span>
						<span @click='toRecommendedCourses'><text>{{$t('index.More')}} >></text></span>
					</view>
					<view>
						<RecommendedCourses :dataList='RecommendedCoursesData'></RecommendedCourses>
					</view>
				</main>
			</view>
		</header>
	</view>
</template>

<script>
	import RecommendedCourses from '@/components/RecommendedCourses/RecommendedCourses.vue'
	export default {
		data() {
			return {
				RecommendedCoursesData: [],
				statusBarHeight: 0,
				navBarHeight: 82+11,
			}
		},
		onShow() {
			
		},
		components: {
			// Tabbar
		},
		onLaunch() {
			uni.removeStorageSync(student_access_token);
			this.quit();
		},
		methods: {
			handove(item){
				 this.$i18n.locale = item;
				 // #ifdef APP-PLUS
				 plus.storage.setItem('locale', item);
				 // #endif
				 // #ifdef H5
				 localStorage.setItem('locale', item);
				 // #endif
				 this.modelStatus=!this.modelStatus;
			},
			toRecommendedCourses() {
				uni.navigateTo({
					url: '../recommendedCourses/recommendedCourses'
				})
			},
			recommendedCourses() {
				let that = this;
				uni.request({
					url: 'http://120.79.0.124:8071/api/mobile/schoolcourse/query',
					method: "GET",
					success: res => {
						// console.log(res.data.data.data);
						this.RecommendedCoursesData = res.data.data.data
						// console.log(this.RecommendedCoursesData);
					},
				})
			},
			async quit() {
				const res = await this.$myRequest({
					url: '/api/mobile/schoolstudent/logout'
				})
				console.log(res);
				if (res.success) {
					uni.removeStorageSync('student_access_token');
					uni.reLaunch({
						url: '../index/index'
					})
				} else {
					uni.showToast({
						title: '退出失败'
					})
				}
			}
		},
		created() {
			this.recommendedCourses();
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
	}
</script>

<style lang="scss" scoped>
	.navBarBox .statusBar {}
	.navBarBox {
		background-color: #3d94f3;
		height: 230rpx;
		
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		
		
		.navBar {
			// background-color: red;
			display: flex;
			align-items: center;
			margin-left: 20rpx;
		}
	}
	
	.index {
		background-color: #e0e9fa;
		height: 2000rpx;

		header {
			// .notice {
			// 	height: 80rpx;
			// 	width: 100%;
			// 	background-color: #3d94f3;
			// }

			.contianer {
				height: 500rpx;
				// background-color: #fff;
				border-radius: 40rpx;
				width: 94%;
				margin-left: 3%;
				margin-right: 3%;
				position: absolute;
				top: 160rpx;
				display: block;

				//轮播图样式
				.swiper-home {
					width: 100%;
					border-radius: 20rpx;
					margin-top: 10rpx;
					overflow: hidden;

					/deep/ .uni-swiper-dot {
						// 指示点元素默认样式
						width: 9upx !important;
						height: 9upx !important;
						background: #C0C0C0 !important;
					}

					/deep/ .uni-swiper-dot-active {
						// 指示点元素激活（当前选中）状态样式
						width: 32upx !important;
						height: 8upx !important;
						background: #42E2CD !important;
						border-radius: 4rpx;
					}

					swiper-item {
						image {
							// border-radius: 20rpx;
							// padding: 15rpx;
							width: 100%;
							height: 100%;
						}
					}
				}

				//分类样式
				.cates {
					width: 100%;
					height: 200rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;

					.cate-item {
						width: 20%;
						height: 160rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-around;

						image {
							border-radius: 50%;
							width: 100rpx;
							height: 100rpx;
						}
					}
				}

				//本校名师
				.shcoolTeacher {
					.shcoolTeacherTop {
						margin-top: 40rpx;
						height: 50rpx;
						width: 100%;
						display: flex;

						span {
							flex: 1;

							h1 {
								font-size: 36rpx;
								justify-content: flex-start;
							}

							text {
								position: absolute;
								right: 0;
							}
						}
					}

					.techers {
						display: flex;
						width: 100%;
						margin-top: 20rpx;

						view {
							margin-right: auto;
							justify-content: space-around;
							height: 287rpx;
							width: 214rpx;
							background: #fff;
							border-radius: 20rpx;

							.techersInfo {
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;

								image {
									margin-top: 14rpx;
									height: 76rpx;
									width: 76rpx;
								}

								h5 {
									margin-top: 14rpx;
								}

								text {
									margin-top: 14rpx;
									font-size: 18rpx;
									color: #d6d2cf;
								}

								.nextImg {
									margin-top: 14rpx;
									width: 46rpx;
									height: 46rpx;
								}
							}
						}
					}
				}

				main {
					.courses {
						margin-top: 40rpx;
						margin-bottom: 30rpx;
						width: 100%;
						display: flex;

						span {
							h1 {
								font-size: 36rpx;
								flex: 1;
							}
						}

						span {
							text {
								position: absolute;
								right: 0%;
							}
						}
					}
				}

				footer {
					.educationalPhilosophy {
						margin-top: 40rpx;
						margin-bottom: 30rpx;
						width: 100%;
						display: flex;

						span {
							h1 {
								font-size: 36rpx;
								flex: 1;
							}
						}

						span {
							text {
								position: absolute;
								right: 0%;
							}
						}
					}
				}

			}
		}

	}
</style>
